<template>
  <!-- 用户用水 -->
  <div class="FlCustomerUseWater">

    <button class="leftTreetitleButton" @click="treeShowOrClose = true" v-if="!treeShowOrClose">
      <i class="el-icon-caret-right"></i>
    </button>
    <div class="leftTree" v-if="treeShowOrClose">
      <!-- 树形图 -->
      <!-- <leftTree></leftTree> -->
      <waterMeterLeftTree class="waterMeterLeftTree" @clickClose="clickClose" @areaIf="areaIf" />
    </div>
    <div :class="[
                { rightcontant: treeShowOrClose },
                { rightcontant2: !treeShowOrClose },
            ]">
      <!-- 搜索框-->
      <div style="padding: 0px 0px">

        <searchComponent v-if="but_pz" :searchData="searchData" :optionsZi="optionsZi" :searchOptionTable="searchOptionTable" :shrinkBoxOpenClose="shrinkBoxOpenClose" @searchCallBack="searchCallBack"></searchComponent>
        <searchComponentsCss v-else :searchData="searchData" :optionsZi="optionsZi" :searchOptionTable="searchOptionTable" :shrinkBoxOpenClose="shrinkBoxOpenClose" @searchCallBack="searchCallBack"></searchComponentsCss>
        <!-- 收缩框 -->
        <!-- {{numSearch}} -->
        <div class="shrinkBox" @click="shrinkBoxOpenClose = !shrinkBoxOpenClose">
          <i :class="
                            shrinkBoxOpenClose
                                ? 'el-icon-arrow-up'
                                : 'el-icon-arrow-down'
                        " v-if="numSearch > 8"></i>
        </div>
        <!-- @clearSearch='clearSearch' -->
        <div class="line"></div>
        <div class="right_row">

          <exportXlsxOne class="importX" :importUrl="importUrl" :suoS="suoS" :multipleSelection="multipleSelection" :oDisabled="oDisabled" />
          <!-- style="float:right;padding:10px;" -->
          <rightButtons @sunS_F="sunS_F" :configurationData="searchData" :btn-switch-configuration="false" @configuration="configuration" @goFatherComponent="goFatherComponent" @emptySearch="emptySearch" class="right_buttons"></rightButtons>
        </div>
      </div>
      <!-- 表格 -->
      <div class="out">
        <!-- style="margin-top:10px;" -->
        <!--数据列表-->
        <!-- {{dataAttribute}} -->
        <!-- 字典 -->
        <dictionaries :searchData="searchData" :modelType="modelType" @optionData="dictionariesCallBack"></dictionaries>
        <el-table ref="multipleTable" :data="dataAttribute" v-loading.body="loading" border fit max-height="511px" highlight-current-row size="mini" :cell-style="{ padding: '5px 0' }" @selection-change="handleSelectionChange" @sort-change="sortChangeTable">
          <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="45"></el-table-column>
          <el-table-column align="center" label="序号" :index="indexMethod" type="index" width="54px"></el-table-column>
          <el-table-column align="center" v-for="item in searchData" v-if="item.tableSign" :key="item.id" :label="item.CN" :prop="item.EN" :sortable="customMethod" :show-overflow-tooltip="true" min-width="140px">
            <template slot-scope="scope">{{
                            item.type === "select"
                                ? optionDatas(
                                      item.typeGroupCode
                                          ? optionsZi[item.EN]
                                          : searchOptionTable[item.EN],
                                      scope.row[item.EN]
                                  )
                                : scope.row[item.EN]
                        }}</template>
          </el-table-column>

        </el-table>
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagetotal"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//引入组件
import {
  SearchCForL,
  searchComponents,
  searchComponentsCss,
  buttonhurdle,
  modificationi,
  examine,
  rightButtons,
  dictionaries,
  importXlsx,
  waterMeterLeftTree,
} from '@/views/components/FLPage'
import searchComponent from './searchComponent.vue'
import {
  SAVE_CHECK_BOXS,
  GAIN_CHECK_BOXS,
} from '@/views/components/FLPage/fun/checkBoxFun'
//引入组件
import exportXlsxOne from '@/views/components/FLPage/exportXlsxOne'
import {
  addFlCustomerUseWater, //增加
  deleteFlCustomerUseWater, //删除
  searchFlCustomerUseWater, //分页查询
  modifyFlCustomerUseWater, //修改
  getFlCustomerUseWater, //根据ID获取
  exprotXls, //导出xlsx数据
  downTem, //导出下载模板
} from '@/api/waterAnalysis/flCustomerUseWater/index'
import { getFullTime, getNowTime, getNowDates } from '@/utils'
export default {
  components: {
    buttonhurdle,
    modificationi,
    examine,
    searchComponents,
    searchComponentsCss,
    importXlsx,
    rightButtons,
    dictionaries,
    exportXlsxOne,
    waterMeterLeftTree,
    searchComponent,
  },
  name: 'FlCustomerUseWater',
  data() {
    return {
      but_pz: false,
      numSearch: 0,
      loading: false,
      treeShowOrClose: false,
      importUrl: `/api/cb/flCustomerUseWater/importXls`,
      //   收缩框开关
      shrinkBoxOpenClose: false,
      //搜索框
      suoS: {},
      //   搜索组件的数据
      searchData: [
        {
          EN: 'id',
          CN: '主键',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'communityCode',
          CN: '小区code',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'setupAddress',
          CN: '安装位置',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'customerNo',
          CN: '客户编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'customerName',
          CN: '客户名称',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'waterNo',
          CN: '水表编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'waterName',
          CN: '水表名',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'waterType',
          CN: '水表类型',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          typeGroupCode: 'meter_style',
          configurationSign: true,
        },
        {
          EN: 'lastNumDate',
          CN: '上期抄表日期',
          value: '',
          type: 'date',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'lastNum',
          CN: '上期读数',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'readNumDate',
          CN: '本期抄表日期',
          value: getFullTime(),
          defaultFullTime: getFullTime(),
          defaultFullDate: getNowDates(),
          type: 'date',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'readNumDate1',
          CN: '本期抄表日期止',
          value: getNowTime(),
          defaultFullTime: getNowTime(),
          type: 'date',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'readNum',
          CN: '本期读数',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'useCount',
          CN: '用水量',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'useMonth',
          CN: '用水月份',
          value: '',
          type: 'dateMonth',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'lastUseCount',
          CN: '上月用水量',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'useStatus',
          CN: '异常状态',
          // CN: "异常状态  正常为0 零用量为1 异常水量为2",
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          typeGroupCode: 'ycStatus',
          configurationSign: true,
          // ycStatus
        },
      ],
      //添加弹窗的数据模型
      diaDataAdd: {
        yyqName: '',
        pqName: '',
        pqNum: '',
        BH: '',
      },
      //删除----Start--------------------------------------
      deleteDataList: [],
      //删除----End----------------------------------------

      //查看----Start--------------------------------------

      //查看的弹窗控制器
      DialogVisibleExamine: false,

      //查看的数据
      examineData: {},

      //查看----End----------------------------------------

      //表格数据
      //后端传来的数据
      dataAttribute: [],
      //表格选中
      multipleSelection: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数,
      modelType: 'table',
      optionsZi: [],
      searchOptionTable: [],
      areaCode: '',
      startTime: '',
      oDisabled: false,
    }
  },
  computed: {
    optionDatas() {
      return function (arr, val) {
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].value == val) {
              return arr[i].label
            }
          }
        }
      }
    },
    customMethod() {
      return 'custom'
    },
  },

  async created() {
    this.getSSearchNum()
    this.loading = true
    let userId = this.$store.state.user.id
    let routerName = this.$route.path
    let peizhiData = await GAIN_CHECK_BOXS(userId, routerName)
    this.but_pz =
      this.$store.state.user.elements['flCustomerUseWater:btn_date'] || false
    console.log({ but_pz: this.but_pz, peizhiData })
    //2.判断数据库里面是否有 以前存过的配置信息
    if (peizhiData != '' && JSON.stringify(peizhiData.stringData) != '{}') {
      this.searchData = JSON.parse(peizhiData.stringData)
    }
    this.forData(this.currentPage, this.pagesize, this.suoS)
  },
  methods: {
    // 搜索框
    getSSearchNum() {
      let searchData = this.searchData
      let num = 0
      for (let i = 0; i < searchData.length; i++) {
        const element = searchData[i]
        if (element.searchSign) {
          num += 1
        } else {
          num = num
        }
      }
      this.numSearch = num
    },
    // 排序
    sortChangeTable(obj) {
      // 上升
      let prop = obj.prop
      // 排序  需求  将驼峰形式的字段 改为 下划线形式的字段
      let abc = prop.replace(/([A-Z])/g, '_$1').toLowerCase()
      let suoS = this.suoS
      suoS.sortName = abc
      if (obj.order === 'ascending') {
        suoS.sortType = obj.order
      } else if (obj.order === 'descending') {
        suoS.sortType = obj.order
        // 下降
      } else {
        // 正常
        suoS.sortType = ''
      }
      this.forData(this.currentPage, this.pagesize, suoS) //刷新列表
    },
    //配置的子组件通知
    async goFatherComponent(OverData) {
      //1.修改父组件的视图***************
      console.log({ OverData })

      this.searchData = JSON.parse(JSON.stringify(OverData))
      //2.保存’配置‘的更改
      //三个参数都是string类型***********

      let obj = {
        userId: this.$store.state.user.id,
        routerName: this.$route.path,
        stringData: JSON.stringify(OverData),
      }

      //封装好的发请求方法*****************
      let save_check_boxs = await SAVE_CHECK_BOXS(obj)
    },
    // 左侧小区条件
    areaIf(areaCode) {
      console.log(areaCode, 'shenenenennen')
      this.areaCode = areaCode
      this.currentPage = 1
      this.forData(this.currentPage, this.pagesize, this.suoS)
    },
    clickClose(res) {
      // console.log(res,999);
      if (res === '点击隐藏') {
        this.treeShowOrClose = false
      }
    },
    // 配置
    configuration(msg) {
      if (msg == '配置') {
        console.log(msg)
      }
    },
    // 重置
    emptySearch(msg) {
      if (msg == '重置') {
        this.areaCode = ''
        this.currentPage = 1
        this.suoS.hasOwnProperty('readNumDate') &&
          Object.keys(this.suoS).forEach((item) => {
            this.suoS[item] = ''
          })
        this.forData(this.currentPage, this.pagesize, this.suoS)
      }
    },
    // 字典组件回调
    dictionariesCallBack([a = {}, b = {}]) {
      // 正常字典
      this.optionsZi = a
      // 跨表字典
      this.searchOptionTable = b

      this.loading = false
      this.forData(this.currentPage, this.pagesize, this.suoS)
    },
    //搜索
    sunS_F(msg) {
      if (msg == '搜索') {
        this.currentPage = 1
        if (this.but_pz) {
        } else {
          if (this.suoS.readNumDate && this.suoS.readNumDate1) {
            if (
              new Date(this.suoS.readNumDate).getTime() >
              new Date(this.suoS.readNumDate1).getTime()
            ) {
              this.$message({
                type: 'warning',
                message: '本期抄表日期大于本期抄表日期止',
              })
              return
            }
          }
        }

        this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
      }
    },
    //查询组件回调
    searchCallBack(newData) {
      let obj = {}
      for (let i = 0; i < newData.length; i++) {
        if (this.but_pz && newData[i].EN == 'readNumDate1') {
          continue
        }
        obj[newData[i].EN] = newData[i].value
      }
      this.suoS = obj
    },
    //渲染数据初始
    forData(page, size, searchData) {
      // 加左侧小区code
      this.loading = true
      if (this.but_pz) {
        if (!searchData.readNumDate) searchData.readNumDate = getNowDates()
      } else {
        if (!searchData.readNumDate) searchData.readNumDate = getFullTime()

        if (!searchData.readNumDate1) searchData.readNumDate1 = getNowTime()
      }

      searchData.communityCode = this.areaCode ? this.areaCode : ''
      searchData.readNumDate = searchData.readNumDate.split(' ')[0]
      searchFlCustomerUseWater(page, size, searchData)
        .then((response) => {
          this.pagetotal = response.data.total
          this.dataAttribute = response.data.list
          this.oDisabled = this.dataAttribute.length ? false : true
          this.loading = false
        })
        .catch(() => {
          this.oDisabled = this.dataAttribute.length ? false : true
        })
    },
    //添加用户--新增表单组件传来的参数
    toAdd(addData) {
      let obj = {}
      for (let i = 0; i < addData.length; i++) {
        obj[addData[i].EN] = addData[i].value
      }
      addFlCustomerUseWater(obj)
        .then((response) => {
          this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          this.$message({
            message: '添加成功',
            type: 'success',
          })
        })
        .catch(() => {
          this.$message.error('添加失败')
        })
    },
    //按钮栏传递了删除命令
    toDelete(orderstring) {
      this.$confirm('确认删除？')
        .then((_) => {
          let idArr = []
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id)
          }
          if (idArr.length == 0) {
            this.$message({
              message: '请选择要删除的数据',
              type: 'warning',
            })
            return
          }
          deleteFlCustomerUseWater(idArr)
            .then((response) => {
              this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
              this.$message({
                message: '删除成功',
                type: 'success',
              })
            })
            .catch((error) => {
              this.$message({
                message: '删除失败',
                type: 'warning',
              })
            })
        })
        .catch((_) => {})
    },
    //单项删除
    deleteList(id) {
      let arrId = [id]
      this.$confirm('确认删除？')
        .then((_) => {
          deleteFlCustomerUseWater(arrId).then((response) => {
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
            this.$message({
              message: '删除成功',
              type: 'success',
            })
          })
          done()
        })
        .catch((_) => {})
    },
    //查看
    makeExaId(id) {
      getFlCustomerUseWater(id)
        .then((response) => {
          let copyDialog = true
          this.DialogVisibleExamine = copyDialog
          // console.log(response);
          this.examineData = response.data
        })
        .catch((error) => {
          alert('获取失败')
        })
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false
    },

    //修改
    modifyData(value, modData) {
      if (value) {
        let id = modData.id
        modifyFlCustomerUseWater(id, modData)
          .then((response) => {
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          })
          .catch((error) => {
            this.$message({
              message: '修改失败',
              type: 'warning',
            })
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          })
      } else {
        this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
      }
    },
    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      //传递删除的参数
      this.deleteDataList = val
    },

    //分页
    handleSizeChange(val) {
      console.log('每页 ' + val + ' 条')
      this.pagesize = val
      this.forData(this.currentPage, val, this.suoS)
    },
    handleCurrentChange(val) {
      console.log('当前页: ' + val)
      this.currentPage = val
      this.forData(val, this.pagesize, this.suoS)
    },
    // 序号
    indexMethod(index) {
      var currentPage = this.currentPage
      var pagesize = this.pagesize
      this.$nextTick(function () {
        currentPage = this.currentPage
        pagesize = this.pagesize
      })
      return currentPage * pagesize - pagesize + 1 + index
    },
    // 下载模板请求
    exprotXlsx: exprotXls,
    downloadFile: downTem,
    //工具栏组件传来的参数
    // FTableFunction(attributeOrderCloneTwiceL) {
    //   this.attributeOrder = attributeOrderCloneTwiceL;
    // },
  },
}
</script>

<style scoped src="@/styles/allCssP.css"></style>
<style lang="scss" scoped>
.FlCustomerUseWater {
  .line {
    border-top: 1px solid #e6e6e6;
    margin: 0px 30px;
  }
  .shrinkBox {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    height: 25px;
    // border-bottom:1px solid #E6E6E6;
  }

  display: flex;

  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
  }

  .leftTree {
    width: 14.2%;
    .waterMeterLeftTree {
      border: 1px soild #ccc;
    }
  }

  .rightcontant {
    width: 85.8%;

    /deep/ .el-table--mini {
      .gutter {
        display: table-cell !important;
      }

      .el-checkbox__inner {
        width: 12px;
        height: 12px;
      }

      // 改变表头的高度  改为45px
      /deep/.el-table__header-wrapper {
        .el-table__header {
          .has-gutter {
            tr {
              th {
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;
              }

              // .is-leaf{
              //   padding: 5px 0 !important;

              // }
            }
          }
        }
      }

      // 表头操作固定定位
      /deep/.el-table__fixed-right {
        .el-table__header {
          thead {
            tr {
              th {
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;

                .cell {
                  // padding-bottom: 5px !important;
                  //   height: 34px;
                  //   line-height: 34px;
                }
              }
            }
          }
        }
      }

      .el-table__body-wrapper {
        .el-table__body {
          tbody {
            .el-table__row {
              height: 47px !important;
            }
          }
        }
      }
    }

    .right_row {
      display: flex;
      align-items: center;
      position: relative;
      padding: 25px 30px;
      .leftButtons {
        padding: 0px !important;

        .meterExchangeData {
          margin-right: 10px;
        }
      }

      .centerButtons {
        flex: 1;
      }

      .right_buttons {
        position: absolute;
        padding: 0px !important;
        right: 30px;
      }

      // .hunt_sunS_F{
      //   float: right;
      //   margin: 10px;
      // }
    }

    .do {
      display: flex;
    }

    .pagination {
      margin-top: 20px;
    }
  }

  .rightcontant2 {
    width: 97%;

    /deep/ .el-table--mini {
      .gutter {
        display: table-cell !important;
      }

      .el-table__body-wrapper {
        .el-table__body {
          tbody {
            .el-table__row {
              height: 47px !important;
            }
          }
        }
      }
    }

    .right_row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding: 25px 30px;
      // overflow: hidden;

      .leftButtons {
        // width: 300px;
        padding: 0px !important;

        .meterExchangeData {
          margin-right: 10px;
        }

        // margin-left: 10px;
      }

      .centerButtons {
        flex: 1;
      }

      .right_buttons {
        position: absolute;
        padding: 0px !important;
        right: 30px;
      }

      .hunt_sunS_F {
        float: right;
        margin: 10px;
      }
    }

    .do {
      display: flex;
    }

    .pagination {
      text-align: left;
      margin-top: 15px;
    }
  }
}
</style>
